<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 600px;
            height: 400px;
            background: #f0f0f0;
            position: relative;
            border-radius: 8px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .array-container {
            display: flex;
            gap: 4px;
            margin-top: 50px;
        }
        .array-element {
            width: 40px;
            height: 40px;
            background: #90CAF9;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            font-size: 16px;
            color: #333;
            transition: all 0.3s;
            border: 2px solid #1976D2;
        }
        .status {
            margin-top: 30px;
            font-size: 16px;
            color: #333;
            font-family: Arial, sans-serif;
        }
        .pointer {
            position: absolute;
            font-size: 20px;
            color: #333;
            transition: all 0.3s;
        }
        .target-display {
            margin-top: 20px;
            font-size: 18px;
            color: #333;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body style="margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f0f0;">
    <div class="container">
        <div class="target-display" id="target-display"></div>
        <div class="array-container" id="array-container"></div>
        <div class="status" id="status"></div>
    </div>

    <script>
        // 创建一个有序数组
        const array = [2, 5, 8, 12, 16, 23, 38, 56, 72, 91];
        let target = 23; // 要查找的目标值

        // 创建数组可视化
        function createArray() {
            const container = document.getElementById('array-container');
            container.innerHTML = '';
            array.forEach((num, index) => {
                const element = document.createElement('div');
                element.className = 'array-element';
                element.textContent = num;
                container.appendChild(element);
            });

            // 显示目标值
            document.getElementById('target-display').textContent = `查找目标值: ${target}`;
        }

        // 更新状态显示
        function updateStatus(message) {
            document.getElementById('status').textContent = message;
        }

        // 二分查找动画
        async function binarySearch() {
            const elements = document.querySelectorAll('.array-element');
            let left = 0;
            let right = array.length - 1;

            while (left <= right) {
                // 重置所有元素的颜色
                elements.forEach(el => {
                    el.style.backgroundColor = '#90CAF9';
                    el.style.borderColor = '#1976D2';
                });

                // 高亮当前搜索范围
                for (let i = left; i <= right; i++) {
                    elements[i].style.borderColor = '#FF4081';
                }

                const mid = Math.floor((left + right) / 2);
                elements[mid].style.backgroundColor = '#FF4081';
                
                updateStatus(`检查中间元素: ${array[mid]}`);
                await new Promise(resolve => setTimeout(resolve, 1000));

                if (array[mid] === target) {
                    elements[mid].style.backgroundColor = '#4CAF50';
                    updateStatus(`找到目标值 ${target} 在位置 ${mid}`);
                    return;
                } else if (array[mid] < target) {
                    left = mid + 1;
                    updateStatus(`${array[mid]} 小于目标值 ${target}，在右半部分继续查找`);
                } else {
                    right = mid - 1;
                    updateStatus(`${array[mid]} 大于目标值 ${target}，在左半部分继续查找`);
                }
                await new Promise(resolve => setTimeout(resolve, 1000));
            }

            updateStatus(`未找到目标值 ${target}`);
        }

        // 初始化并开始动画
        function init() {
            createArray();
            setTimeout(binarySearch, 1000);
        }

        init();

        // 每15秒重置并重新开始，同时随机选择一个新的目标值
        setInterval(() => {
            target = array[Math.floor(Math.random() * array.length)];
            init();
        }, 15000);
    </script>
</body>
</html> 